---
title: Monitore seu Site Astro com Sentry
description: Como monitorar seu site Astro com Sentry
sidebar:
  label: Sentry
type: backend
logo: sentry
stub: false
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Sentry](https://sentry.io) oferece um serviço de monitoramento de aplicação e rastreamento de erros compreensivo projetado para ajudar desenvolvedores a identificar, diagnosticar e resolver questões em tempo real.

Leia mais em nosso blog sobre a [parceria Astro com Sentry](https://astro.build/blog/sentry-official-monitoring-partner/) e aplicação de barra de ferramentas de desenvolvidor Sentry Spotlight que traz uma sobreposição de debug rica em seu ambiente de desenvolvimento Astro. Spotlight mostra erros, rastros e contexto importante direto no seu navegador durante desenvolvimento local.

O SDK Astro Sentry permite o relatório automático de erros e dados de rastreamento em sua aplicação Astro.

## Configuração do Projeto

Uma lista completa de pré-requisitos pode ser encontrada [no guia Sentry para Astro](https://docs.sentry.io/platforms/javascript/guides/astro/#prerequisites).

## Instalação

Sentry captura dados ao usar um SDK dentro do tempo de execução da sua aplicação.

Instale o SDK executando o seguinte comando com seu gerenciador de pacotes de preferência na CLI Astro:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add @sentry/astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add @sentry/astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add @sentry/astro
  ```
  </Fragment>
</PackageManagerTabs>

A CLI Astro instala o pacote SDK e adiciona a integração Sentry em seu arquivo `astro.config.mjs`.

## Configuração

Para configurar a integração Sentry, você precisa fornecer as seguintes credenciais em seu arquivo `astro.config.mjs`.

1. **Chave cliente (DSN)** - Você pode encontrar o DSN em suas configurações de projeto Sentry dentro de *Client keys (DSN)*.
2. **Nome do projeto** - Você pode encontrar o nome do projeto em suas configurações do projeto Sentry dentro de *General settings*.
3. **Token de autenticação** - Você pode criar um token de autenticação em suas configurações de organização Sentry dentro de *Auth tokens*.

:::note
Se você estiver criando um novo projeto Sentry, selecione Astro como sua plataforma para obter todas as informações necessárias para configurar o SDK.
:::

```js title="astro.config.mjs" ins={2, 6-12}
import { defineConfig } from 'astro/config';
import sentry from '@sentry/astro';

export default defineConfig({
  integrations: [
    sentry({
      dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
      sourceMapsUploadOptions: {
        project: 'projeto-exemplo',
        authToken: process.env.SENTRY_AUTH_TOKEN,
      },
    }),
  ],
});
```
Uma vez que você configurou seu `sourceMapsUploadOptions` e adicionou seu `dsn`, o SDK capturará e enviará automaticamente erros e eventos de desempenho para Sentry.

## Teste sua instalação

Adicione o seguinte elemento `<button>` em uma de suas páginas `.astro`. Isso permitirá que você ative manualmente um erro para que você possa testar o processo de relatório de erro.

```astro title="src/pages/index.astro"
<button onclick="throw new Error('Isso é um erro teste')">Lançar erro teste</button>
```

Para ver e resolver o erro registrado, entre em [sentry.io](https://sentry.io/) e abra seu projeto.
